<template>
    <div cclass="app-container">
        <br>
        <!-- 查询表单 -->
        <el-form :inline="true" class="demo-form-inline" style="padding: 7px 40px;">
            <el-form-item>
                <el-input v-model="teacherQuery.name" placeholder="讲师名"></el-input>
            </el-form-item>

            <el-form-item>
                <el-select v-model="teacherQuery.level" clearable placeholder="讲师头衔">
                <el-option label="高级讲师" value="1"></el-option>
                <el-option label="首席讲师" value="2"></el-option>
                </el-select>
            </el-form-item>

             <el-form-item >
                <el-date-picker 
                    v-model="teacherQuery.begin"
                    type="datetime"
                    placeholder="选择开始时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    default-time="00:00:00"
                />
            </el-form-item>

            <el-form-item >
                <el-date-picker 
                    v-model="teacherQuery.end"
                    type="datetime"
                    placeholder="选择结束时间"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    default-time="00:00:00"
                />
            </el-form-item>

           
            <el-button type="primary" icon="el-icon-search" @click="getList()">查询</el-button>
            <el-button type="default" @click="resertData()">清空</el-button>
         
        </el-form>
        <!-- 表格展示数据 -->
        <el-table
            :data="list" 
            stripe
            style="width: 100%;">
             <el-table-column
                label="序号"
                width="70"
                align="center">
                <template slot-scope="scope">
                    {{(page - 1) * limit + scope.$index + 1}}
                </template> 
            </el-table-column>
            <el-table-column prop="name" label="名称" width="80" />
            <el-table-column label="头衔" width="80">
                <template slot-scope="scope">
                    {{scope.row.level===1?'高级讲师':'首席讲师'}}
                </template> 
            </el-table-column>
            <el-table-column prop="intro" label="简介"  align="center" width="250" />
            <el-table-column prop="career" label="资历" width="100" />
            <el-table-column prop="gmtCreate" label="添加时间" width="160" />
            <el-table-column prop="gmtModified" label="更新时间" width="160" />
            <el-table-column prop="sort" label="排序" width="60" />

             <el-table-column label="操作" width="200" align="center">
                <template slot-scope="scope">
                    <router-link :to="'/teacher/edit/'+scope.row.id">
                        <el-button type="primary" size="mini" icon="el-icon-edit">修改</el-button>
                    </router-link>
                    <el-button type="danger" size="mini" icon="el-icon-delete" @click="removeDatabyId(scope.row.id)">删除</el-button>
                </template> 
            </el-table-column>

        </el-table>
        <!-- 分页条 -->
        <el-pagination
            :current-page.sync="page"
            :page-size="limit"
            :total="total"
            background
            style="padding: 30px 0; text-align: center;"
            layout="prev, pager, next, jumper"
            @current-change="getList">
        </el-pagination>
    </div>
</template>


<script>
// 引入调用teacher.js
import teacher from '@/api/edu/teacher'

export default {
    // 核心代码
    data() {
        return {
            list:null, // 查询返回接口集合
            page:1, // 当前页
            limit:10, // 每页显示的数据
            total:0,
            teacherQuery:{} // 条件对象
        }
    },
    created() {
        this.getList()
    },
    methods: {
        // 讲师列表
        getList(page =1){
            this.page = page
            teacher.getTeacherListPage(this.page,this.limit,this.teacherQuery)
            // 请求成功
            .then(response =>{
              this.list = response.data.rows
              this.total = response.data.total
              console.log(this.list);
              console.log(this.total);

            })
            // 请求失败
            .catch(error =>{
                console.log(error);
            })
        },
        // 清空数据
        resertData(){
            // 表单输入项清空
            this.teacherQuery = {}
            // 查询所有数据
            this.getList()
        },
        // 删除讲师
        removeDatabyId(id){
            this.$confirm('此操作将永久删除该数据, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
            teacher.deleteTeacherById(id)
                    // 请求成功
                .then(response =>{
                    // 提示信息
                    this.$message({ 
                        type: 'success',
                        message: '删除成功!'
                    });
                    // 返回列表页面
                    this.getList()
                })
            })
        }
    }

}
</script>
